<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../css/normalize.css"/>
    <link rel="stylesheet" href="../../css/fa.css"/>
    <link rel="stylesheet" href="../../css/icon.css"/>
    <link rel="stylesheet" href="../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../css/app.css"/>
    <link rel="stylesheet" href="../../css/iframe.css"/>
    <style>

    </style>

</head>
<body>
<form class="ares-p layui-form" lay-filter="form">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input name="name" placeholder="请输入姓名" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="male" title="男" checked>
            <input type="radio" name="sex" value="female" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">出生日期</label>
        <div class="layui-input-block">
            <input name="birthday" id="birthday" placeholder="请选择出生日期" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input name="mobile" placeholder="请输入手机号" class="layui-input" lay-verify="required|phone">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div id="role-wrap" class="layui-input-block"></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">提交表单</button>
            <span id="pwd-tip" class="layui-hide ares-text-red ares-text-xs">提示: 新建用户的默认密码为用户生日!</span>
        </div>
    </div>
</form>
</body>

<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../aresExtends/config/layuiConfig.js"></script>
<script>
	layui.use(['laydate', 'form', 'utils', 'userServices', 'roleServices', 'qs'], function (laydate, form, utils, userServices, roleServices, qs) {
		var queryParams = qs.parse(location.search.substr(1));

		init();

		/**
		 * @author: ares
		 * @date: 2021/4/28 11:37
		 * @description: 提交表单
		 */
		form.on('submit(submit)', function (data) {
			var fields = data.field,
				service = null,
				$this = $(data.elem);
			if (queryParams.id) {
				service = userServices.update;
				fields.id = queryParams.id;
			} else {
				service = userServices.create;
			}
			if (!service) return;
			$this.prop('disabled', true).addClass('layui-btn-disabled');
			service.call(userServices, fields).then(function (res) {
				utils.msgSuccess(res.msg)
				$this.prop('disabled', false).removeClass('layui-btn-disabled');
				utils.layerCloseAll('iframe');
				utils.ARES.event.emit('updateUserList');
			}).catch(function (err) {
				$this.prop('disabled', false).removeClass('layui-btn-disabled');
			})
			return false;
		});

		/**
		 * @author: ares
		 * @date: 2021/4/28 13:08
		 * @description: 更新前回显表单内容
		 */
		function setForm() {
			userServices.getDetail(queryParams.id).then(function (res) {
				var data = res.data;
				form.val("form", {
					name: data.name,
					sex: data.sex,
					birthday: data.birthday,
					mobile: data.mobile,
				});
				renderRoleSelect(data.role.id);
				form.render();
			})
		}

		/**
		 * @author: ares
		 * @date: 2021/4/28 13:03
		 * @description: 渲染角色下拉列表
		 * @param defaultVal
		 */
		function renderRoleSelect(defaultVal) {
			var $roleSelectWrap = $('#role-wrap');
			roleServices.getList().then(function (res) {
				$roleSelectWrap.empty().append(utils.createSelect('role', res.data, defaultVal, {
					name: 'name',
					value: 'id',
					verify: {'lay-verify': 'required'}
				}));
				form.render('select');
			})
		}

		/**
		 * @author: ares
		 * @date: 2021/4/28 13:09
		 * @description: 初始化
		 */
		function init() {
			if (queryParams.id) {
				setForm();
			} else {
				renderRoleSelect();
				$('#pwd-tip').removeClass('layui-hide');
			}
			laydate.render({
				elem: '#birthday',
				showBottom: false,
				value: new Date()
			});
			form.render();
		}

	})
</script>


</html>